<template>
  <div>
    <el-button type="danger" @click="batchDelete">批量删除</el-button>
    <el-tree
      ref="menuTree"
      :data="menus"
      :props="defaultProps"
      show-checkbox
      node-key="id"
      :default-expanded-keys="expandedKey"
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level<=2"
            type="text"
            size="mini"
            @click="() => append(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            编辑
          </el-button>
          <el-button
            v-if="node.childNodes.length==0"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等
  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data: function () {
      return {
        dialogType: "",
        title: "",
        category: {
          name: "",
          isShow: 1,
          isMenu: 1,
          parentId: 0,
          seq: 1,
          templateId: 42,
          id: null,
          goodsNum: 0
        },
        dialogFormVisible: false,
        expandedKey: [],
        menus: [],
        defaultProps: {
          label: "name",
          children: "childrens"
        }
      }
    },
    methods: {
      //获取分类菜单
      getMenus(){
        //发送请求,最终请求的是 http://127.0.0.1:8888/api/product/category/list/tree
        //http://127.0.0.1:8888/api 是 index.js文件中 已经配置好了 baseUrl
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(({data}) => {
          console.log("成功获取到了菜单数据...", data);
          this.menus = data.data;
        })
      },
      //添加分类
      append(data) {
        console.log("点击添加分类啦......",data)
        //显示对话框
        this.dialogFormVisible = true;
        //设置title及类型
        this.title = "新增分类";
        this.dialogType = "新增";
        //填写新增分类信息（初始化数据）
        //点击新增时，获取它的id，让它变成添加的分类的父id
        this.category.parentId = data.id;
        this.category.id = null;
        this.category.name = "";
        this.category.isMenu = "0";
        this.category.isShow = "1";
        this.category.templateId = 0;
        this.category.seq = 0;
        this.category.goodsNum = 0;
      },
      //编辑分类
      edit(data) {
        console.log("点击编辑分类啦......",data);
        //显示对话框
        this.dialogFormVisible = true;
        //设置title及类型
        this.title = "编辑分类";
        this.dialogType = "编辑";
        //数据回显操作
        this.$http({
          url: this.$http.adornUrl(`/product/category/info/${data.id}`),
          method: 'post',
        }).then(({data}) => {
          this.category.parentId = data.data.parentId;
          this.category.id = data.data.id;
          this.category.name = data.data.name;
          this.category.isMenu = data.data.isMenu;
          this.category.isShow = data.data.isShow;
          this.category.templateId = data.data.templateId;
          this.category.seq = data.data.seq;
          this.category.goodsNum = data.data.goodsNum;
        })

      },
      //删除分类
      remove(node, data) {
        console.log("删除菜单...",node,data);
        this.$confirm(`是否删除[${data.name}]菜单?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = [data.id];
          this.$http({
            url: this.$http.adornUrl('/product/category/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //重新刷新当前菜单
            this.getMenus();
            //设置需要默认展开的菜单, 设置为 要删除节点的父节点
            this.expandedKey = [node.parent.data.id];
          });

        }).catch(() => {
        });
      },
      addCategory(){
        console.log("提交三级分类数据data...", this.category);
        this.$http({
          url: this.$http.adornUrl('/product/category/save'),
          method: 'post',
          data: this.$http.adornData(this.category, false)
        }).then(({data}) => {
          this.$message({
            type: 'success',
            message: '菜单保存成功!'
          })
          //对话框关闭
          this.dialogFormVisible = false;
          //重新刷新当前菜单
          this.getMenus();
          //设置需要默认展开的菜单, 设置为 要删除节点的父节点
          this.expandedKey = [this.category.parentId];
        });
      },
      editCategory(){
        console.log("提交编辑...的内容啦",this.category)
        var {id, name} = this.category; //获取分类名称和ID
        this.$http({
          url: this.$http.adornUrl('/product/category/update'),
          method: 'post',
          data: this.$http.adornData({id, name}, false)
        }).then(({data}) => {
          this.$message({
            type: 'success',
            message: '名称修改成功!'
          })
          //对话框关闭
          this.dialogFormVisible = false;
          //重新刷新当前菜单
          this.getMenus();
          //设置需要默认展开的菜单, 设置为 要删除节点的父节点
          this.expandedKey = [this.category.parentId];
        });
      },
      //提交编辑与分类数据
      submitData(){
        //添加分类
        if(this.dialogType == "新增"){
          this.addCategory();
        }
        //编辑分类
        if(this.dialogType == "编辑"){
          this.editCategory()
        }
      },
      batchDelete(){
        console.log("批量删除了.............")
        let ids = [];
        //通过eltree中的属性来获取菜单
        let checkedNodes = this.$refs.menuTree.getCheckedNodes();
        for (let i = 0; i < checkedNodes.length; i++) {
          //将选中的checkedbox的id添加到isd数组中
          ids.push(checkedNodes[i].id)
        }
        this.$confirm(`是否批量删除[${ids}]菜单?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/product/category/delete'),
            method: 'post',
            //这个是将前端的数据以json格式传给后端
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            this.$message({
              type: 'success',
              message: '菜单批量删除成功!'
            })
            //重新刷新当前菜单
            this.getMenus();
          });

        });
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
      this.getMenus();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {

    },
    beforeCreate () {

    }, // 生命周期 - 创建之前
    beforeMount () {}, // 生命周期 - 挂载之前
    beforeUpdate () {}, // 生命周期 - 更新之前
    updated () {}, // 生命周期 - 更新之后
    beforeDestroy () {}, // 生命周期 - 销毁之前
    destroyed () {}, // 生命周期 - 销毁完成
    activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>

<style >
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
